<template>
  <!-- 自定义video组件 -->
  <div class="video-box" ref="videoBox" @mousemove="showControl">
    <!-- video API相关获取与调用 -->
    <div class="video-cover" v-show="!play" @click="playVideo">
      <i class="iconfont">&#xe8ca;</i>
    </div>
    <video
      class="video"
      ref="video"
      :src="url"
      @pause="handlePlay(2)"
      @play="handlePlay(1)"
      @loadedmetadata="getVideoLength()"
      @timeupdate="videoTimeUpdate"
      @click="playVideo"
    >
      该浏览器不支持video
    </video>
    <!-- 视频控件 -->
    <div class="video-control" ref="videoControl" v-if="brs.length > 0">
      <span class="video-play" @click="playVideo">
        <i class="iconfont" v-show="!play">&#xe8ca;</i>
        <i class="iconfont" v-show="play">&#xe8cb;</i>
      </span>
      <span class="video-time">{{ (currentTime * 1000) | changeTime }}</span>
      <span class="video-progress">
        <!-- 进度条 -->
        <el-slider
          class="commonSlider"
          :show-tooltip="false"
          v-model="currentTime"
          :max="videoLength"
          @change="changeVideoTime"
        >
        </el-slider>
      </span>
      <!-- videoLength 总时间，currentTime 当前时间，videoTime 自定义过滤器 -->
      <span class="video-time">{{ (videoLength * 1000) | changeTime }}</span>
      <span class="video-voice">
        <span @click="setMuted">
          <i class="iconfont" v-show="!mute">&#xe8cd;</i>
          <i class="iconfont" v-show="mute">&#xe8ce;</i>
        </span>
        <span class="video-voice-slide">
          <el-slider
            @input="changeVideoVoice"
            v-model="voice"
            vertical
            height="100px"
          >
          </el-slider>
        </span>
      </span>
      <span class="video-r">
        <!-- 视频分辨率 -->
        {{ br }}
        <ul class="video-r-list" v-if="rl.length > 0">
          <li
            class="video-r-item"
            v-for="item in rl"
            :key="item[0]"
            @click="changeBr(item[0])"
          >
            {{ item[1] }}
          </li>
        </ul>
      </span>
      <!-- 全屏播放 -->
      <span class="video-full" @click="toggleFullScreen">
        <i class="iconfont" v-show="!full">&#xe615;</i>
        <i class="iconfont" v-show="full">&#xe616;</i>
      </span>
    </div>
  </div>
</template>

<script>
import { changeTime } from "common/time.js";

export default {
  props: {
    url: {
      type: String,
      default() {
        return "";
      },
    },
    brs: {
      type: Array,
      default() {
        return [];
      },
    },
    r: {
      type: Number,
      default() {
        return 1080;
      },
    },
  },
  data() {
    return {
      //播放还是暂停 true播放中
      play: false,
      // 分辨率
      rl: [],
      br: "1080P",
      // 上一次的分辨率
      lr: 1080,
      //当前播放时间
      currentTime: 0,
      videoLength: 0,
      //标记时间戳
      lastTime: 0,
      // 视频音量
      voice: 30,
      lastVoice: 30,
      // 静音
      mute: false,
      // 全屏
      full: false,
      // 鼠标不移动隐藏控件
      timeout: null,
    };
  },
  filters: {
    // 将毫秒数转换为时分秒
    changeTime(time) {
      return changeTime(time);
    },
  },
  mounted() {},
  methods: {
    changeBr(clickR) {
      // console.log(clickR);
      // console.log(clickR);
      let lt = 0;
      lt = this.$refs.video.currentTime;
      // console.log(lt);
      // 比较分辨率
      if (clickR !== this.lr) {
        // 分辨率不同，重新加载
        this.$emit("boxChangeBr", clickR);
        console.log(this.play);
        if (this.play) {
          this.play = false;
          // console.log(this.play);
          this.$refs.video.pause();
          // console.log(lt);
        } else {
          console.log(lt);
          // this.changeVideoTime(lt);
          this.$refs.video.currentTime = lt;
        }
      }
      // if (this.play) {
      // this.play = false;
      //   // console.log(this.play);
      //   this.changeVideoTime(lt);
      //   this.playVideo();
      //   // this.$refs.video.play();
      // } else {
      //   console.log(this.play);

      //   this.changeVideoTime(lt);
      //   console.log(lt);
      // }
      // console.log(this.$refs.video.currentTime);
      // console.log(this.$refs.video.volume);
      // console.log(this.play);
      // this.$refs.video.load();
      // this.playVideo();
      // this.changeVideoTime(lt);
      // this.videoTimeUpdate();
    },
    // 获取分辨率数据
    getBrs() {
      this.brs.forEach((item, index) => {
        // console.log(index);
        if (
          (item.resolution && item.resolution == 240) ||
          (item.br && item.br == 240)
        ) {
          // item.key = "标清";
          // this.rl[240] = "标清";
          this.rl[index] = [240, "标清"];
        }
        if (
          (item.resolution && item.resolution == 480) ||
          (item.br && item.br == 480)
        ) {
          // item.key = "高清";
          // this.rl[480] = "高清";
          this.rl[index] = [480, "高清"];
        }
        if (
          (item.resolution && item.resolution == 720) ||
          (item.br && item.br == 720)
        ) {
          // item.key = "超清";
          // this.rl[720] = "超清";
          this.rl[index] = [720, "超清"];
        }
        if (
          (item.resolution && item.resolution == 1080) ||
          (item.br && item.br == 1080)
        ) {
          // item.key = "1080P";
          // this.rl[1080] = "1080P";
          this.rl[index] = [1080, "1080P"];
        }
      });
      this.rl.reverse();
      this.rl.forEach((item) => {
        if (this.r == item[0]) {
          // 记录现在的分辨率
          this.lr = this.r;
          this.br = item[1];
        }
      });
      // console.log(this.rl);
    },
    // 显示隐藏控件
    showControl(e) {
      if (this.brs.length > 0) {
        this.$refs.videoBox.style.cursor = "auto";
        this.$refs.videoControl.style.display = "flex";
        let videoControl = this.$refs.videoControl;
        let videoBox = this.$refs.videoBox;
        // console.log(videoControl.style.display);
        // 防抖
        clearTimeout(this.timeout);
        this.timeout = setTimeout(function () {
          videoControl.style.display = "none";
          videoBox.style.cursor = "none";
        }, 3000);
      }
    },
    // 全屏切换
    toggleFullScreen(event) {
      const myvideo = this.$refs.videoBox;
      //如果当前是全屏状态，就退出全屏，否则进入全屏状态
      //获取当前的全屏状态
      let isFullscreen = document.webkitIsFullScreen || document.fullscreen;
      if (!isFullscreen) {
        const inFun =
          myvideo.requestFullscreen || myvideo.webkitRequestFullScreen;
        //让当前播放器进入全屏状态
        inFun.call(myvideo);
        this.full = true;
      } else {
        const exitFun =
          document.exitFullscreen || document.webkitExitFullScreen;
        //退出全屏状态要使用document
        exitFun.call(document);
        this.full = false;
      }
    },
    // 静音切换
    setMuted() {
      if (this.mute) {
        this.voice = this.lastVoice;
        this.$refs.video.volume = this.lastVoice / 100;
        this.mute = false;
        this.$refs.video.muted = false;
      } else {
        this.voice = 0;
        this.$refs.video.volume = 0;
        this.mute = true;
        this.$refs.video.muted = true;
      }
      // console.log(this.$refs.video.volume);
      // console.log(this.$refs.video.muted);
    },
    // 改变音量
    changeVideoVoice(val) {
      if (val == 0) {
        this.mute = true;
        this.$refs.video.muted = true;
        this.$refs.video.volume = 0;
      } else {
        this.mute = false;
        this.$refs.video.muted = false;
        this.lastVoice = val;
        this.$refs.video.volume = val / 100;
      }
    },
    playVideo() {
      // console.log(this.$refs.video);
      //播放视频
      if (this.play) {
        this.$refs.video.pause();
      } else {
        Math.abs(this.currentTime - this.$refs.video.currentTime) > 2
          ? (this.$refs.video.currentTime = this.currentTime)
          : "";
        this.$refs.video.play();
        // this.$refs.video.muted = false;
        this.$refs.video.volume = this.voice / 100;
        // console.log(this.$refs.video.volume);
      }
    },
    videoTimeUpdate() {
      //更新视频时间。节流，每秒触发一次
      let nowTime = Date.now();
      let gapTime = 1000;
      if (!this.lastTime || nowTime - this.lastTime > gapTime) {
        if (this.$refs.video) {
          let time = this.$refs.video.currentTime;
          this.currentTime = time;
        }
        this.lastTime = nowTime;
      }
    },
    changeVideoTime(val) {
      //改变视频时间
      // console.log(val, "video");
      if (this.$refs.video) {
        this.$refs.video.currentTime = val;
      }
    },
    getVideoLength() {
      this.getBrs();
      //获取视频时长
      // console.log(this.$refs.video.duration);
      this.videoLength = this.$refs.video.duration;
      // console.log("获取视频时长", this.videoLength);
    },
    handlePlay(status) {
      //status 1播放 2暂停
      status == 1 ? (this.play = true) : (this.play = false);
      // console.log(this.play);
    },
  },
};
</script>

<style>
.video-box {
  position: relative;
  width: 100%;
  height: 478px;
  background-color: #000;
  overflow: hidden;
}
.video-cover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
  z-index: 2;
  color: #fff;
  width: 80px;
  height: 80px;
  line-height: 72px;
  text-align: center;
  border: 5px solid #ddd;
  border-radius: 50%;
  cursor: pointer;
}
.video-cover .iconfont {
  font-size: 50px;
  padding-left: 9px;
}
.video {
  width: 100%;
  height: 100%;
}
.video-box:hover .video-control {
  display: flex;
}
.video-control {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  line-height: 38px;
  background-color: rgba(0, 0, 0, 0.5);
}
.video-progress {
  flex: 1;
  margin-left: 10px;
  margin-right: 10px;
}
.commonSlider {
  display: inline-block;
  width: 100%;
}
.video-play {
  padding: 0 10px;
  color: #fff;
}
.video-play .iconfont {
  padding: 5px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}
.video-play:hover .iconfont {
  box-shadow: 0 0 4px 3px #ccc;
}
.video-time {
  position: relative;
  padding: 0 10px;
  height: 38px;
  color: rgba(255, 255, 255, 0.8);
}
.video-voice,
.video-full,
.video-r {
  position: relative;
  padding: 0 10px;
  height: 38px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}
.video-voice:hover,
.video-full:hover,
.video-r:hover {
  color: #fff;
}
.video-voice:hover .video-voice-slide {
  display: block;
}
.video-voice-slide:hover {
  display: block;
}
.video-voice-slide {
  display: none;
  position: absolute;
  bottom: 38px;
  left: 0;
  height: 130px;
  padding-top: 15px;
  background-color: rgba(0, 0, 0, 0.2);
}
.video-r:hover .video-r-list {
  display: block;
}
.video-r-list:hover {
  display: block;
}
.video-r-list {
  display: none;
  position: absolute;
  bottom: 38px;
  left: -9px;
  background-color: rgba(0, 0, 0, 0.2);
}
.video-r-item {
  color: #fff;
  width: 70px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.video-r-item-current {
  background-color: rgba(255, 255, 255, 0.5);
}
.video-r-item:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
</style>